<template>
  <Poptip
    v-model="visible"
    popper-class="header-notice-wrapper"
  >
    <template slot="content">
      <Tabs>
        <TabPane label="通知" name="1">
          <CellGroup>
            <Cell title="你收到了 14 份新周报" label="一年前">
              <Avatar slot="icon" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
            </Cell>
            <Cell title="你推荐的 曲妮妮 已通过第三轮面试" label="一年前">
              <Avatar slot="icon" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
            </Cell>
            <Cell title="这种模板可以区分多种通知类型" label="一年前">
              <Avatar slot="icon" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
            </Cell>
          </CellGroup>
        </TabPane>
        <TabPane label="消息" name="2">
          消息
        </TabPane>
        <TabPane label="待办" name="3">
          待办
        </TabPane>
      </Tabs>
      <Spin fix v-if="loadding">加载中...</Spin>
    </template>
    <span @click="fetchNotice" class="header-notice" ref="noticeRef">
      <Badge :count="count" overflow-count="99" :offset="[20,0]" >
        <Icon type="ios-notifications-outline" size="22"></Icon>
      </Badge >
    </span>
  </Poptip>
</template>

<script>
export default {
  name: 'NoticeBox',
  data () {
    return {
      loadding: false,
      visible: false,
      count: 0
    }
  },
  created () {
    this.fetchCount()
  },
  methods: {
    fetchCount () {
      this.count = Math.floor(Math.random() * 100 + 1)
    },
    fetchNotice () {
      if (!this.visible) {
        this.loadding = true
        setTimeout(() => {
          this.fetchCount()
          this.loadding = false
        }, 2000)
      } else {
        this.loadding = false
      }
    }
  }
}
</script>

<style lang="css">
  .header-notice-wrapper {
    top: 50px !important;
  }
</style>
<style lang="less" scoped>
  .header-notice{
    display: inline-block;
    transition: all 0.3s;

    span {
      vertical-align: initial;
    }
  }
</style>
